<template>
  <view class="container-gray">
    <view class="basic-info-box" @click="uploadAvatar">
      <image :src="info.headUrl || defaultHeadUrl" class="avatar" />
      <view style="margin-top: 10upx;">更换头像</view>
    </view>

    <view class="readonly-form">
      <view v-for="(item, index) in fields" :key="index">
        <!-- 出生生日 -->
        <view v-if="item.value === 'birthday'" class="item edit">
          <view class="name">{{item.name}}</view>
          <picker mode="date" :value="birthdayEndDate" @change="bindDateChange" class="value">
            <view class="picker">{{info.birthday?info.birthday:'请选择'}}</view>
          </picker>
        </view>
        <!-- 手机号码 -->
        <view
          v-else-if="item.value === 'mobile'"
          @click="goEdit('手机号',info.mobile,2)"
          class="item edit"
        >
          <view class="name">{{item.name}}</view>
          <view class="value">{{info[item.value] || '未完善'}}</view>
        </view>
        <!-- 不可修改的字段 -->
        <view v-else class="item">
          <view class="name">{{item.name}}</view>
          <view class="value">{{info[item.value] || '未完善'}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { post_md5 } from '../../common/request'
import uploader from '../../components/uploader/uploader'

export default {
  data() {
    return {
      enableEdit: false,
      birthdayEndDate: null,
      info: {},
      gender: [
        {
          val: '男',
          id: 1
        },
        {
          val: '女',
          id: 2
        }
      ],
      defaultHeadUrl: '/static/logo/logo1024x1024.png',
      fields: [
        { name: '姓名', value: 'realname' },
        { name: '性别', value: 'genderStr' },
        { name: '身份证号', value: 'identityCard' },
        { name: '出生日期', value: 'birthday' },
        { name: '手机号', value: 'mobile' },
        { name: '员工编号', value: 'jobNumber' },
        { name: '部门', value: 'deptName' },
        { name: '工种', value: 'craftName' },
        { name: '职务', value: 'duty' },
        { name: '职称', value: 'professionalTitle' },
        { name: '文化程度', value: 'education' },
        { name: '政治面貌', value: 'politicCountenance' },
        { name: '入党时间', value: 'joinThePartyTime' },
        { name: '籍贯', value: 'nativePlace' }
      ]
    }
  },
  onShow() {
    this.getUserInfo()
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      let userId = uni.getStorageSync('userId')
      post_md5(`/usercenter-app/user/info/${userId}`).then(res => {
        this.info = res.data
        this.info.genderStr = this.info.gender === 1 ? '男' : '女'
        this.birthdayEndDate = res.data.birthday
        this.joinThePartyTimeEndDate =
          res.data.joinThePartyTime || new Date().toLocaleDateString()
      })
    },

    // 上传头像
    async uploadAvatar() {
      var imageUrl = await uploader.uploadImage()
      if (imageUrl) {
        this.info.headUrl = imageUrl

        await post_md5('/usercenter-app/user/editheadurl', {
          userId: uni.getStorageSync('userId'),
          headUrl: this.info.headUrl
        })
        uni.showToast({ title: '修改成功', icon: 'none' })
      }
    },
    // 跳转编辑
    goEdit(title, value, tag) {
      uni.navigateTo({
        url: 'edit-person?title=' + title + '&value=' + value + '&tag=' + tag
      })
    },
    // 修改生日
    bindDateChange(e) {
      this.info.birthday = e.detail.value  
      const params = {
        userId: uni.getStorageSync('userId'),
        birthday: e.detail.value
      }
      post_md5('/usercenter-app/user/editbirthday', params).then(res => {
        uni.showToast({
          title: '修改成功',
          icon: 'none'
        })
      })
    },
    stopEvent() {
      //@click.stop防止事件冒泡
    },
    moveHandle() {
      //不让页面滚动
    }
  }
}
</script>

<style lang="less">
.readonly-form {
  margin-top: 6upx;
  background-color: #fff;

  .item {
    display: flex;
    justify-content: space-between;
    padding: 30upx 40upx;
    border-bottom: 1px solid #eee;

    &.edit {
      &:after {
        content: ' ';
        position: absolute;
        width: 24upx;
        height: 24upx;
        background-size: contain;
        background-image: url('../../static/icon/icon-go.png');
        background-repeat: no-repeat;
        margin-top: 10upx;
        right: 6upx;
      }
    }

    .value {
      color: #999;
      margin-right: 20upx;
    }

    &:last {
      border-bottom: none;
    }
  }
}

.basic-info-box {
  background: #ffffff;
  padding: 30upx;
  height: 360upx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .avatar {
    width: 200upx;
    height: 200upx;
    border-radius: 50%;
  }
}
</style>
